.home {
  @apply w-full h-full flex flex-col p-10 overflow-y-auto;
  font-family: PingFang SC;
  background: #fafafb;

  .title {
    @apply font-semibold text-main leading-7;
    font-size: 28px;
  }

  .line {
    @apply my-7;
  }

  .titleLabel {
    span {
      @apply text-sm font-semibold;
      line-height: 14px;
      color: #333;

      &.red {
        @apply text-red mr-1;
      }

      &.error {
        @apply text-red;
        margin-left: 10px;
      }
    }
  }

  .moneyBox {
    @apply flex items-center;
    margin: 10px 0;

    input {
      @apply text-sm text-main px-5;

      &::placeholder {
        @apply text-main-aa;
      }

      width: 220px;
      height: 38px;
      border: 1px solid #d8d8d8;
    }

    span {
      @apply text-sm text-main;
      margin-left: 10px;
    }
  }

  .moneyTips {
    @apply text-sm text-main mb-10;
    line-height: 14px;
  }

  .accountBox {
    margin-top: 10px;

    .accountItem {
      @apply flex items-center;
      height: 48px;

      &.accountActive,
      &:hover {
        .box {
          background: #ebfdef;

          .checkbox {
            @apply border-transparent;
            transform-origin: bottom left;
            background: #26a615;

            &::after {
              @apply absolute w-1 h-2 border-solid left-1 border-white;
              content: '';
              top: 1px;
              border-width: 0 2px 2px 0;
              transform: scale(0) rotate(45deg);
              animation: ripple 0.2s ease forwards;
            }
          }

          @keyframes ripple {
            0% {
              transform: scale(0) rotate(45deg);
            }

            25% {
              transform: scale(0.25) rotate(45deg);
            }

            50% {
              transform: scale(0.5) rotate(45deg);
            }

            75% {
              transform: scale(0.75) rotate(45deg);
            }

            100% {
              transform: scale(1) rotate(45deg);
            }
          }
        }
      }

      .box {
        @apply flex flex-1 h-full rounded text-sm text-main items-center px-5 cursor-pointer;

        line-height: 14px;

        .checkbox {
          @apply relative block rounded-sm border border-solid;
          border-color: #bce8b6;
          width: 14px;
          background: #eeffe4;
          height: 14px;
        }

        .platform {
          @apply ml-5;
          margin-right: 10px;
          width: 14px;
          height: 14px;
        }

        .platformName {
          margin-right: 10px;
        }
      }

      .del {
        @apply text-sm text-main-aa w-14 h-full flex items-center justify-center cursor-pointer relative;
        &:hover {
          @apply text-red;
        }
        .delPanel {
          @apply absolute rounded bg-white z-4 p-5 cursor-default;
          top: 46px;
          width: 232px;
          height: 92px;
          right: -20px;
          box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);

          .warnBox {
            @apply flex items-center text-main;
            font-family: PingFang SC;
            font-size: 14px;

            span {
              @apply text-main text-sm;
              line-height: 14px;
              margin-left: 10px;
            }
          }

          .btnGroup {
            @apply w-full flex items-center justify-end;
            margin-top: 14px;
            .btn {
              @apply h-6;
              width: 48px;

              &.btn1 {
                @apply text-main-aa text-sm;
                background: #eeeeee;
                margin-right: 10px;
              }

              &.btn2 {
                @apply bg-theme text-white;
              }
            }
          }
        }
      }
    }
  }

  .addAccountBox {
    @apply relative w-full mt-5 mb-10;
    height: 14px;

    .addAccount {
      @apply flex w-fit h-full cursor-pointer items-center;

      span {
        @apply text-sm text-main-aa;
        line-height: 14px;
        margin-left: 10px;
      }

      &:hover {
        & > span {
          @apply text-theme;
        }

        .svg {
          path {
            fill: var(--theme-color);
          }
        }
      }
    }

    .showPanel {
      @apply absolute left-0;
      top: 14px;
    }
  }

  .remarksInput {
    @apply text-sm text-main px-5 w-full shrink-0;
    height: 38px;
    &::placeholder {
      @apply text-main-aa;
    }

    border: 1px solid #d8d8d8;
  }

  .submit {
    @apply bg-theme text-lg flex mx-auto shrink-0;
    width: 432px;
    height: 48px;
    margin-top: 186px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
    &:hover {
      @apply bg-black;
    }
  }
}
